import React, { Component } from 'react'
/**
 * r c c :react create component
 */
export default class App extends Component {

    click1(){ // click1 会出现在App.prototype
        console.log('click1 this: ', this)
    }
    click2(){
        console.log('click2 this: ',this)
    }
    click3(){
        console.log('click3 this: ', this)
    }

    // 会出现在App 的实例对象身上
    click4 = ()=>{
        console.log('click4 this: ', this)
    }
    render() {
        return (
            <>
                <div>事件回调函数的this指向问题</div>
                <p><button onClick={this.click1}>指向undefined</button></p>

                {/* 推荐使用：不占内存，能传递参数 */}
                <p><button onClick={()=>this.click1()}>包裹箭头函数</button></p>
                {/* 推荐使用：不占内存，能传递参数 */}
                <p><button onClick={this.click1.bind(this)}>bind绑定</button></p>

                {/* 缺点：每个实例都有一个=>占内存：并且不能传参 */}
                <p><button onClick={this.click4}>直接定义箭头函数</button></p>
            </>
        )
    }
}
